<!-- html -->
<template>
  <span class="span2">num：{{ num }}</span>
  <button class="button1" @click="changeNum">修改num</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'lifecycleTest1Children'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
//数据
let num = ref(1)
//方法
function changeNum() {
  num.value += 1
}
//setup默认创建
console.log('子组件创建')
//挂载前
onBeforeMount(() => {
  console.log('子组件挂载前')
})
//挂载后
onMounted(() => {
  console.log('子组件挂载后')
})
//修改前
onBeforeUpdate(() => {
  console.log('子组件修改前')
})
//修改后
onUpdated(() => {
  console.log('子组件修改后')
})
//卸载前
onBeforeUnmount(() => {
  console.log('子组件卸载前')
})
//卸载后
onUnmounted(() => {
  console.log('子组件卸载后')
})
</script>

<!-- 样式 -->
<style scoped></style>